<template>
    <div class="login-bg">
        <div class="form-box">
            <el-form :model="form" label-width="70px" class="login-form">
            <el-form-item label="登录名:" required>
            <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="密码:" required>
            <el-input v-model="form.pass" type="password" />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
        </div>

    </div>

</template>
<script lang="ts" setup>
    import { reactive} from 'vue'
    import { useRouter } from 'vue-router'
    const form = reactive({
      name: '',
      pass: ''
    })
    const router = useRouter()

    const onSubmit = () => {
        const data = {...form}
        console.log(router)
        localStorage.setItem('user',JSON.stringify(data))
        router.push({
            name: 'Home'
        })
    }
    

</script>
<style scoped lang="scss">
.login-bg{
    height: 100vh;
    width: 100%;
    position: relative;
    background-color:#ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .form-box{
        display: flex;
        width: 450px;
        height: 400px;
        box-sizing: border-box;
        padding: 20px;
        border: 1px solid gainsboro;
        border-radius: 6px;
        justify-content: center;
        align-items: center;

    }
}

</style>
